<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="icon" href="../资源/favicon.ico" type="image/x-icon" />
  <title>Object</title>
</head>

<body>
  <div class="container" dropzone="copy">
    不是不是321312
    <span>78979</span>
  </div>

  <div style="width: 5rem; height: 5rem" draggable="true" contenteditable="true" class="box" data-id="999"
    tabindex="-1">
    79789
    <img draggable="false"
      src="https://images.unsplash.com/photo-1572276596237-5db2c3e16c5d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80"
      alt="内容" title="图片" style="width: 100%; height: 100%; cursor: pointer" id="img" />
  </div>

  <div class="content">
    <div>:focus-within伪类</div>
    <input type="text" />
    <div class="res"></div>
  </div>

  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    html {
      /* clamp() */
      /* calc() */
      /* 响应式解决方案 */
      /* 手机端-375px*   1vw = 3.75px   100px =26.666666vw; /
        /* font-size: 26.666666vw; */

      /* pc端-1920px*   1vw = 19.2px   100px = 5.208333333333334vw  */
      font-size: max(5.208333333333334vw, 66px);
    }

    .box {
      font-size: 0.2rem;
      /* transform: translateX() translateY() scale(1); */
      /* transition: width 0.3s ease-in; */

    }

    /* .box:hover {
      transform: translateX() ;
    } */

    .content {
      padding: 10px;
      display: flex;
      flex-direction: column;
      margin: 0 auto;
      width: 4rem;
      aspect-ratio: 2/1;
      border: 1px solid;
      justify-content: center;
      align-items: center;
    }

    .content>div:first-child {
      font-size: 0.2rem;
    }

    .content:focus-within {
      background: red;
      width: 500px;
      transition: all 0.3s;
    }

    div#box {
      cursor: move;
    }

    .content input[type='text'] {
      display: inline-block;
      width: 80%;
    }

    .content input[type='text']:focus {
      background: rgb(78, 14, 24);
    }

    .container {
      font-size: 0.2rem;
      min-width: 1rem;
      min-height: 1rem;
      position: relative;
      aspect-ratio: 1/1;
      /*设置长宽比*/
      display: inline-block;
      background: lightcoral;
      width: 2rem;
      overflow-wrap: wrap;
      /* white-space: nowrap; */
      scroll-behavior: smooth;
      overflow: auto;
      resize: both;
      /* mask-image: url; */
    }

    .container>span {
      display: flex;
      place-content: center;
      place-items: center;
      /* display: inline-block; */
      width: 0.8rem;
      height: 0.5rem;
      background-color: brown;
      position: absolute;
      /* top: 0;
        left: 0; */
      right: 0;
      bottom: 0;
      cursor: move;
      /**设置宽高比*/
      aspect-ratio: 1/1;
    }

    @media print {
      div {
        display: none;
        aspect-ratio: 1/2;
        /*设置长宽比*/
      }
    }

    body,
    html {
      scroll-behavior: smooth;
    }
  </style>

  <script>
    // let searchParams = new URLSearchParams('foo=1&bar=2');
    // console.log('  searchParams.get', searchParams.get('bar'));

    // 首先写一个假的地址（q=URLUtils.searchParams&topic=api）相当于当前的window.location.href
    // const urlParams = new URL(window.location.href);
    // urlParams.searchParams.has("topic") === true; // true
    // urlParams.searchParams.get("topic") === "api"; // true
    // urlParams.searchParams.getAll("topic"); // ["api"]
    // urlParams.searchParams.get("foo") === ""; // true
    // urlParams.searchParams.append("topic", "webdev");
    // urlParams.searchParams.toString(); // "q=URLUtils.searchParams&topic=api&topic=webdev"
    // urlParams.searchParams.set("topic", "More webdev");
    // urlParams.searchParams.toString(); // "q=URLUtils.searchParams&topic=More+webdev"
    // urlParams.searchParams.delete("topic");
    // urlParams.searchParams.toString(); // "q=URLUtils.searchParams"

    // window.devicePixelRatio(dpr像素比) = 物理像素(分辨率) / CSS像素(逻辑像素);
    // 设备物理像素，其实就是物理分辨率，也就是我们常说的手机分辨率，如2048*1080就指2k屏幕，横向有2048个像素点，纵向有1080个像素点
    // CSS像素px是一个相对单位，一个CSS像素可以代表多个物理像素
    // 原始尺寸 = css样式尺寸 * 缩放倍率devicePixelRatio;

    // let mql = window.matchMedia('screen and (min-width: 1000px)');
    // function mediaqueryresponse(mql) {
    //   if (mql.matches) {
    //     console.log('屏幕宽度>=1000px');
    //     document.body.style.backgroundColor = 'yellow';
    //   } else {
    //     console.log('屏幕宽度<1000px');
    //     document.body.style.backgroundColor = 'pink';
    //   }
    // }
    // mediaqueryresponse(mql);
    // mql.addListener(mediaqueryresponse);
    // mql.removeListener(mediaqueryresponse);

    // 多条媒体查询语句-123
    const query = {
      xs: '(max-width:576px)', // 0 -576
      sm: '(min-width:576px)', // 576 - 768
      md: '(min-width:768px)', // 768 - 992
      lg: '(min-width:992px)', // 992 - 1200
      xl: '(min-width:1200px)', // 1200 -1600
      xxl: '(min-width:1600px)', // >1600
    };

    let access = {
      a: 123,
    };
    let promisee = {
      b: 456,
    };
    let apis = {
      c: 789,
    };

    // const weakMap = new WeakMap();
    // weakMap.set(access, 123);
    // weakMap.set(promisee, 456);
    // console.log(weakMap.get(access));
    // console.log(weakMap);

    // Object.assign(access, promisee, apis);
    // access = { ...access, ...promisee, ...apis };
    // console.log(access, promisee, apis);
    // let asfas = 'asd';
    // console.log('asd ', [...asfas]);

    function User(name, age) {
      this.name = name;
      this.age = age;
    }
    User.prototype.onShow = function () {
      console.log(this.name, this.age);
    };
    function myExtend(child, father) {
      child.prototype = Object.create(father.prototype);
      // child.prototype.__proto__ = child.prototype
      Object.defineProperty(child, 'constructor', {
        value: child,
        enumerable: false,
      });
    }

    function Admin(...args) {
      User.apply(this, args);
    }

    myExtend(Admin, User);

    const ad = new Admin('llq', 24);
    console.log('ad', ad);
    // console.log('new DY().__proto__ ', new DY().__proto__);
    // console.log(DY.prototype);
    // console.log(Function.prototype);
    // console.log(Object.__proto__ == Function.prototype);
    // Object.constructor ==Function
    // Array.__proto__ === Function.prototype
    // Array.constructor ==Function

    // Function.__proto__=== Function.prototype // ture
    // Function.constructor === Function // ture

    const imgDom = document.querySelector('#img');
    imgDom.onclick = function (ev) {
      console.log(' ev', ev);
    };

    try {
      a;
      // console.log('try');
      // console.log(' ', aaaa);
    } catch {
      console.log('catch');
      // throw error;
      // throw new Error(error);
    } finally {
      console.log('finally');
    }
    console.log('end');
  </script>

  <script>
    // console.log('script');
    let date = new Date();
    let strDate = date.toLocaleString();
    // console.log('date.toLocaleString()', date.toLocaleString());
    // console.log('date.toLocaleTimeString()', date.toLocaleTimeString());
    // console.log('date.toLocaleDateString()', date.toLocaleDateString());
    // let newStrDate = strDate.replace(/\//g, (cur, index) => {
    //   console.log(cur, index);
    // });
    // console.log('newStrDate', newStrDate);

    // new Date().toLocaleString().replace(/\//g,'-')
    // '2022-9-8 10:47:10'

    // 真正随机打乱数组
    function shuffleRandomArray(arr) {
      let i = arr.length;
      while (i) {
        let j = Math.floor(Math.random() * i--);
        [arr[j], arr[i]] = [arr[i], arr[j]];
      }
      return arr;
    }

    let obj = {
      id: 1,
      name: '请求',
      age: 18,
      sing() {
        return '唱歌';
      },
    };
    let valName = obj.name;

    Object.defineProperty(obj, 'name', {
      get() {
        return valName;
      },
    });
    obj.name;

    function formatDate(time = new Date(), cFormat) {
      // if (arguments.length === 0) return null;
      // const format = cFormat || '{y}-{m}-{d} {h}:{i}:{s}';
      const format = cFormat || '{y}-{m}-{d} {h}:{i}:{s} {a}';
      let date;
      if (typeof time === 'object') {
        date = time;
      } else {
        if (('' + time).length === 10) time = Number.parseInt(time, 10) * 1000;
        date = new Date(time);
      }
      const formatObj = {
        y: date.getFullYear(),
        m: date.getMonth() + 1,
        d: date.getDate(),
        h: date.getHours(),
        i: date.getMinutes(),
        s: date.getSeconds(),
        a: date.getDay(),
      };

      const timeStr = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
        // console.log('result', result);
        // console.log('key', key);
        let value = formatObj[key];
        if (key === 'a') {
          return ['一', '二', '三', '四', '五', '六', '日'][value - 1];
        }
        if (result.length > 0 && value < 10) {
          value = '0' + value;
        }
        return value || 0;
      });
      return timeStr;
    }
    // obj.sex = 'nan' //给对象赋值
    // delete obj.sing //删除对象某个值
    // console.log(obj);

    // let objs = {
    //   name: 'llq',
    //   24: '24',
    //   1: '11',
    //   age: 18,
    // };
    // for (let key in objs) {
    //   console.log(key);
    // }

    // obj = {
    //   //给对象添加值
    //   ...obj,
    //   height: 1.88,
    // };
    // console.log(obj);
    // Object.is() 判读两个值是否相等
    // Object.assign(obj) 浅拷贝  yisheng ky shenbuf
    // console.log(Object.keys(obj));
    // console.log(Object.values(obj));
    // Object.defineProperty(obj, 'age', {
    //   value: 20,
    //   writable: true,
    //   enumerable: true,
    //   configurable: true,
    // })
    // console.log(obj);
    // window对象
    // window.open(); //打开新的页面
    // window.print(); //打印
    // window.scrollTo(0, y); //把内容滚动到指定的坐标。
    // window.resizeTo(); //把页面大小设置
    //onload 监听页面加载完成或者图片加载完成  //onresize监听页面大小发生变化
    // history.go(0); //刷新
    // location.reload(); //刷新

    // window.innerHeight; //- 浏览器窗口的内高度（以像素计 ）
    // window.innerWidth; //- 浏览器窗口的内宽度（以像素计 包括滚动条）
    // window.pageYOffset; //页面头部被卷去的高

    // document.body.clientHeight; //文档的高度()
    // // document.body.offsetLeft //
    // document.body.clientWidth; //文档的宽度()不含边框
    // document.body.offsetWidth; //() 含边框的
    // document.body.offsetHeight; //()

    // document.documentElement.clientHeight; //html高
    // document.documentElement.clientWidth; //html宽

    // location对象
    // location.reload(); //重新加载网页文档
    // location.assign(URL); //加载新的网页
    // location.href; //设置或返回完整的 URL
    // location.host; //设置或返回主机名和当前 URL 的端口号。
    // location.search; //设置或返回从问号 (?) 开始的 URL（查询部分）。(参数)
    // // location.pathname

    // screen.height; //返回显示器屏幕的高度
    // screen.width; //返回显示器屏幕的宽度
    // screenLeft;
    // screenTop;

    // // document对象
    // document.title; //返回当前网页标题
    // document.body;
    // document.URL;
    // document.documentElement; //返回html
    // document.URL; //返回当前url
    // document.body; //body
    // document.documentElement; //html
    // history对象
    // history.go(); //网页前进 后退
    // history.go(0); //刷新

    let arr1 = [
      {
        id: 1,
        name: '气得',
        disabled: false,
      },
      {
        id: 2,
        name: '过后',
        disabled: false,
      },
      {
        id: 3,
        name: '具有',
        disabled: false,
      },
      {
        id: 4,
        name: '发威',
        disabled: false,
      },
      {
        id: 5,
        name: '开通',
        disabled: false,
      },
    ];

    let arr2 = [
      {
        id: 3,
        name: '具有',
        disabled: false,
      },
      {
        id: 4,
        name: '发威',
        disabled: false,
      },
      {
        id: 5,
        name: '开通',
        disabled: false,
      },
    ];

    for (let i = 0; i < arr1.length; i++) {
      const item = arr1[i];
      // console.log('item ', item);
      for (let j = 0; j < arr2.length; j++) {
        const its = arr2[j];
        if (item.id === its.id) {
          item.disabled = true;
          // console.log('its', i, j);
        }
      }
    }
    // console.log('arr1', arr1);
    // console.log('====================');
    /**
     * 并发请求函数
     * @param {*} urls
     * @param {*} max
     * @return {*}
     */
    function allRequest(urls, max) {
      return new Promise((resolve) => {
        if (urls.length === 0) {
          resolve([]);
          return;
        }

        const result = [];
        let index = 0,
          count = 0;

        async function request() {
          if (index === urls.length) return;
          const i = index;
          curURL = urls[index];
          index++;
          try {
            const ret = await fetch(curURL);
            result[i] = ret;
          } catch (err) {
            result[i] = err;
          } finally {
            count++;
            if (count === urls.length) {
              resolve(result);
            }
            request();
          }
        }

        const num = Math.min(max, urls.length);
        for (let s = 0; s < num; s++) {
          request();
        }
      });
    }

    let urlArr = [];

    for (let i = 0; i < 5; i++) {
      urlArr.push('https://www.baidu.com/');
    }
    // console.log(urlArr);

    // allRequest(urlArr, 3).then((ret) => {
    //   console.log('ret', ret);
    // // });
    // var a = 1;
    // if (0) {
    //   a = 5;
    //   var a = function (params) {};
    // }
    // console.log(a);

    // const arrs = ['11 44 77', '22 55 88', '77 88 99'];

    function Na(params) {
      this.count = 0;
    }

    Na.prototype.show = function () {
      console.log(this);
    };

    const na = new Na();
    na.show();

    na.__proto__.show();
    Na.prototype.show();
  </script>

  <script type="module">
    import { SM4Util } from '../资源/sm4.js';
    const sm4 = new SM4Util();
    // console.log('sm4 ', sm4);
    // const str = Math.random().toString(16).slice(2);

    console.log('===========================');

    let token = '';
    for (let i = 0; i < 32; i++) {
      token += i + 1;
    }
    console.log('之前token ', token);
    const nowStr = Math.floor(Date.now() / 1000) + '';
    const lastStr = +nowStr.at(-1);
    console.log(' nowStr', nowStr);
    console.log(' lastStr', lastStr);
    const a132 = sm4.encryptData_CBC(nowStr);

    const a3 = a132.slice(0, 7);
    const a1 = a132.slice(7, 15);
    const a2 = a132.slice(15, 22);
    const a4 = a132.slice(22, 24);

    console.log('加密后的时间戳秒 ', a132);
    // console.log('a132长度 ', a132.length);

    if (lastStr === 0) {
      token = a1 + a2 + token + a3 + a4;
    } else {
      token = a1 + token.slice(0, lastStr) + a2 + token.slice(lastStr) + a3 + a4;
    }

    console.log('token', token);

    const newA123 = sm4.decryptData_CBC(a132);
    // console.log('newA123 ', newA123);

    const useDeferRender = (maxFrameCount = 1000) => {
      let frameCount = 0;
      const refreshFrameCount = () => {
        window.requestAnimationFrame(() => {
          frameCount++;
          if (frameCount < maxFrameCount) {
            // console.log('requestAnimationFrame');
            refreshFrameCount();
          }
        });
      };
      refreshFrameCount();
      return function (showInFrameCount) {
        return frameCount <= showInFrameCount;
      };
    };
    const isRenders = useDeferRender();

    for (let index = 0; index < 80; index++) {
      if (isRenders(index)) {
        // console.log('isRenders(index)', isRenders(index));
      }
    }

    // window.structuredClone 方法是原生的深克隆方法

    // const farr = [1, 2, [3, [4, 5, [777, 88, 9]]]];
    // console.log(
    //   '   farr.flatMap((item) => item);',
    //   farr.flatMap((item) => {
    //     console.log('item', item);
    //     return item;
    //   })
    // );



    const contentDom = document.querySelector('.content');
    contentDom.getBoundingClientRect()


    try {

    } catch (error) {

    }


    window.addEventListener('error', (error) => {
      //
    })

    imgDom.addEventListener('error', (error) => {
      //
    })

    iframeDom.addEventListener('error', (error) => {
      //
    })


    Promise.reject('error').catch((err) => { })


    try {
      await fn()
    } catch (error) {
      error.log
    }



    window.addEventListener('unhandledrejection', (error) => {
    })
    window.addEventListener('rejectionhandled', (error) => {
    })




    // 1.全局污染
    // 2.变量提升
    // 3.块级作用域
    // 4.暂时性死区
    // 5.重复声明




  </script>
</body>

</html>

<!-- git pull === git fetch + git merge -->
<!-- git pull 与 git fetch 的区别
1.git pull 会把远程分支的代码更新到本地，然后合并到本地分支。
2.git fetch 只会从远程仓库下载更新，不会合并到本地。
3.git pull 的执行速度比 git fetch 要慢。
4.git pull 会自动执行 git fetch 和 git merge，而 git fetch 则不会。
5.git pull 可以指定分支，而 git fetch 不行。 -->